<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">

    <meta charset="UTF-8">
    <meta name="divport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            /* background: #ffffff; */
            margin: 0 auto;
        }
        /* .back{
            width: 30%;
            height: 120px;
            margin: 0 auto;
            background: skyblue;
            border-radius: 10px;
        } */
        .logo{
            margin-top: 120px;
            font-size: 40px;
            text-align: center;
            margin-top: 120rpx;
            color: firebrick;
        }
    
        .btn {
            color: aliceblue;
            background-color: firebrick;
            width: 16%;
            border: none;
            height: 40px;
            text-align: center;
            margin: 20px auto;
            border-radius: 8px;
        }
        .downstate {
            display: flex;
            margin-top: -50rpx;
            margin-left: 30rpx;
        }
    
        .inp{
            width: 100%;
            height: 30px;
            text-align: center;
            margin: 0 auto;
            margin-top: 20px;
        }
        .inp input{
            border-radius: 6px;
            width: 30%;
            height: 30px;
            border: 1px solid firebrick;
            
        }
        .regist {
            display: flex;
            margin-top: 20px;
            flex-direction: column;
            /* justify-content: center; */
            /* justify-content: flex-end; */
            /* align-items: flex-end; */
        }
        .toregist{
            width: 30%;
            display: flex;
            justify-content: space-between;
            padding: 30rpx;
            margin: 0 auto;
        }
        .alert {
      transition: .5s;
      opacity: 0;
    }

    .alert.show {
      opacity: 1;
    }

    </style>
    
</head>

<body>
    <div class="all">
        <div class="alert alert-success" role="alert">
            提示消息
          </div>
        <div class="logo">
            LOGIN
        </div>
        <div>
            <div class="inp">
                <input type="text" placeholder="请输入账号" class="username" value="12345678">
            </div>
            <div class="inp">
                <input type="text" placeholder="请输入密码" class="password" value="123456">
            </div>
        </div>
        <!-- <div class="downstate">
            <p style="display: block;">(保存登录状态)</p>
        </div> -->
        <div class="regist">
            <button class="btn">登录</button>
            <div class="toregist">
                <div @click="reg">
                    注册
                </div>
                <div class="">忘记密码</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/login.js"></script>


</body>

</html>